<template>
  <div class="image-upload-container">
    <!-- 上传区域 -->
    <div
      class="upload-area"
      :class="{ dragging: isDragging }"
      @dragover.prevent="onDragOver"
      @dragleave.prevent="onDragLeave"
      @drop.prevent="onDrop"
      @click="triggerInput"
    >
      <input
        type="file"
        ref="fileInput"
        accept="image/*"
        @change="handleFileChange"
        hidden
      />
      <i class="upload-icon">📸</i>
      <div class="upload-text">点击或拖拽上传图片</div>
    </div>

    <FullScreenPopup v-model:visible="popup">
      <div v-if="imageUrl" class="image-preview">
        <img :src="imageUrl" alt="Image preview" />
      </div>
      <button type="button" @click="BackgroundImage">设置为背景</button>
    </FullScreenPopup>
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
import { openDB, addData } from "@/util/image.js";
import FullScreenPopup from "../FullScreenPopup/index.vue";
export default {
  name: "ImageUpload",
  components: {
    FullScreenPopup,
  },
  setup() {
    const imageUrl = ref(null); // 保存预览图片的 URL
    const isDragging = ref(false); // 判断是否拖拽中
    const fileInput = ref(null); // 文件输入框的引用
    const fileName = ref(null); // 文件输入框的引用
    const popup = ref(false);
    // 使用 Vuex 状态管理
    const store = useStore();

    //上传文件
    const handleFileChange = (event) => {
      const file = event.target.files[0];
      fileName.value = file.name;
      popup.value = true;
      openDB("web", 1).then((db) => {
        addData(db, "imglist", file).then((res) => {
          imageUrl.value = res.url;
        });
      });
    };

    // 处理拖拽进入区域
    const onDragOver = () => {
      isDragging.value = true;
    };

    // 处理拖拽离开区域
    const onDragLeave = () => {
      isDragging.value = false;
    };

    // 处理拖拽放置文件
    const onDrop = (event) => {
      isDragging.value = false;
      popup.value = true;
      const file = event.dataTransfer.files[0];
      openDB("web", 1).then((db) => {
        addData(db, "imglist", file).then((res) => {
          imageUrl.value = res.url;
        });
      });
    };

    // 触发文件选择框
    const triggerInput = () => {
      fileInput.value.click();
    };

    const BackgroundImage = () => {
      store.commit("imgUrl", fileName);
      store.commit("setvide", false);
      popup.value = false;
      setTimeout(() => {
        imageUrl.value = null;
      }, 1000);
    };

    return {
      imageUrl,
      isDragging,
      fileInput,
      popup,
      fileName,
      handleFileChange,
      onDragOver,
      onDragLeave,
      onDrop,
      triggerInput,
      BackgroundImage,
    };
  },
};
</script>

<style scoped>
.image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.upload-area {
  width: 300px;
  height: 150px;
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  transition: border 0.3s;
}

.upload-area.dragging {
  border-color: #409eff;
}

.upload-icon {
  font-size: 40px;
  color: #409eff;
}

.upload-text {
  color: #409eff;
  margin-top: 10px;
}

.image-preview {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
}
</style>
